<template>
  <div class="scanner">
    <van-nav-bar title="移库下架" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row style="margin-top: 0.5rem;" type="flex" justify="center">
      <van-col>
        <van-form>
          <van-field label="原始箱号" v-model="moveTakeoutParams.fromCartonNo" autosize rows="1" type="textarea" disabled />
          <van-field
            v-model="moveTakeoutParams.moveCode"
            ref="moveCode"
            id="moveCode"
            name="移库单号"
            label="移库单号"
            placeholder="移库单号"
            @focus="moveCodeFocusClick"
            @click="moveCodeFocusClick"
            :readonly="moveCodeReadOnly"
            @keyup.enter.native="verifyMoveCode"
          />
          <van-field
            v-model="moveTakeoutParams.fromLocationCode"
            ref="fromLocationCode"
            id="fromLocationCode"
            name="原始库位"
            label="原始库位"
            placeholder="原始库位"
            @focus="fromLocationCodeFocusClick"
            @click="fromLocationCodeFocusClick"
            :readonly="fromLocationCodeReadOnly"
            @keyup.enter.native="verifyFromLocationCode"
          />
          <van-field
            v-model="moveTakeoutParams.moveCartonNumber"
            ref="moveCartonNumber"
            id="moveCartonNumber"
            name="移库箱号"
            label="移库箱号"
            placeholder="建议使用YK前缀的箱号"
            @focus="moveCartonNumberFocusClick"
            @click="moveCartonNumberFocusClick"
            :readonly="moveCartonNumberReadOnly"
            @keyup.enter.native="verifyMoveCartonNumber"
          />
          <van-field
            v-model="moveTakeoutParams.barCode"
            ref="barCode"
            id="barCode"
            name="SKU"
            label="SKU"
            placeholder="SKU"
            @focus="barCodeFocusClick"
            @click="barCodeFocusClick"
            :readonly="barCodeReadOnly"
            @keyup.enter.native="verifyBarCode"
          />
          <van-row style="margin-left:16px">
            <van-col span="12">
              <van-cell title="数量" class="van-cell-style">
                <input
                  v-model="moveTakeoutParams.takeoutQty"
                  ref="takeoutQty"
                  id="takeoutQty"
                  onkeyup="value=value.replace(/[^\d]/g,'')"
                  class="van-field__control"
                  readonly
                />
              </van-cell>
            </van-col>
            <van-col span="12">
              <van-cell title="负数" class="van-cell-style">
                <template #right-icon>
                  <van-checkbox shape="square" v-model="minusChecked" @click="minusClick()" style="width:50%" />
                </template>
              </van-cell>
            </van-col>
          </van-row>
          <van-row style="margin-top:16px;margin-left:16px">
            <van-col span="8">
              <van-cell
                title="待移库"
                class="van-cell-style"
                v-model="moveTakeoutParams.allowTakeoutQty"
                ref="allowTakeoutQty"
                id="allowTakeoutQty"
              />
            </van-col>
            <van-col span="8" style="text-align:center">
              <van-cell
                title="已移库"
                class="van-cell-style"
                v-model="moveTakeoutParams.oldTakeoutQty"
                ref="oldTakeoutQty"
                id="oldTakeoutQty"
              />
            </van-col>
            <van-col span="8" style="text-align:center">
              <van-cell title="差异" class="van-cell-style" v-model="moveTakeoutParams.differQty" ref="differQty" id="differQty" />
            </van-col>
          </van-row>
        </van-form>
        <div style="float: right; margin: 8px;">
          <van-button type="primary" size="small" @click="clickNextCarton()">下一单</van-button>
        </div>
      </van-col>
    </van-row>
    <!-- 普通消息响应遮罩层 -->
    <van-overlay :show="showMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="24" style="text-align:center">
              <van-button type="primary" @click="closeOverlay()">关闭</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>
    <!-- 复杂消息响应遮罩层 -->
    <van-overlay :show="showComplexMsgOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">{{ showComplexMsg }}</div>
          </van-row>
          <van-row style="margin-top:64px">
            <van-col span="12" style="text-align:center">
              <van-button type="primary" @click="closeComplexOverlay()">取消</van-button>
            </van-col>
            <van-col span="12" style="text-align:center">
              <van-button type="primary" @click="nextCarton()">继续</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-overlay>

    <!-- 加载遮罩 -->
    <van-overlay :show="showLoadingOverlay">
      <div class="wrapper">
        <div>
          <van-row>
            <div class="msgTxt">加载中......</div>
          </van-row>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {verifyMoveCode, verifyFromLocationCode, verifyMoveCartonNumber, verifyBarCode, executeMoveTakeout} from "@/api/biz/move/move.js";
export default {
  name: "moveTakeout",
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  watch: {
    // 扫描枪操作
    pdaScanData: {
      handler(data) {
        this.scanEvent(data.data);
        let input = document.activeElement.id;
        if (input == "moveCode") {
          this.moveTakeoutParams.moveCode = data.data;
          this.verifyMoveCode();
        }
        if (input == "fromLocationCode") {
          this.moveTakeoutParams.fromLocationCode = data.data;
          this.verifyFromLocationCode();
        }
        if (input == "moveCartonNumber") {
          this.moveTakeoutParams.moveCartonNumber = data.data;
          this.verifyMoveCartonNumber();
        }
        if (input == "barCode") {
          this.moveTakeoutParams.barCode = data.data;
          this.verifyBarCode();
        }
      },
      deep: true
    }
  },
  created() {
    // 默认光标在箱号框
    this.moveCodeFocus();
    this.moveTakeoutParams.user = this.userData.sysUserLoginName;
    // 获取货主/仓库/品牌
    if (this.$root.storerWarehouseBrand === undefined) {
      this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
    } else {
      this.moveTakeoutParams.storerId = this.$root.storerWarehouseBrand.storerId;
      this.moveTakeoutParams.warehouseId = this.$root.storerWarehouseBrand.warehouseId;
      this.moveTakeoutParams.brandId = this.$root.storerWarehouseBrand.brandId;
    }
  },
  data() {
    return {
      // 只读选项
      moveCodeReadOnly: false,
      fromLocationCodeReadOnly: false,
      moveCartonNumberReadOnly: false,
      barCodeReadOnly: false,

      // 表单参数
      moveTakeoutParams: {
        storerId: "",
        warehouseId: "",
        brandId: "",

        fromCartonNo: "",
        moveCode: "",
        fromLocationCode: "",
        moveCartonNumber: "",
        barCode: "",
        takeoutQty: "1",
        fromLocationId: "",
        allowTakeoutQty: 0,
        oldTakeoutQty: 0,
        differQty: 0
      },
      // 负数选择框
      minusChecked: false,
      // 消息遮罩层参数
      showMsgOverlay: false,
      showMsg: "",
      showComplexMsgOverlay: false,
      showComplexMsg: "",
      // 当前得失焦点的文本框
      currentBlurName: "",

      // 加载遮罩
      showLoadingOverlay: false
    };
  },
  methods: {
    // 扫描枪扫描
    clickEvent() {
      this.scanData = [];
      // this.$toast.success("扫描数据被清理了");
    },
    scanEvent(data) {
      this.scanData.push(data);
    },
    scanErrorEvent() {},
    cellClickEvent() {},

    // 移库单点击或失焦
    moveCodeFocusClick() {
      this.moveCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "moveCode";
      setTimeout(() => {
        this.moveCodeReadOnly = false;
      }, 200);
    },
    // 焦点聚焦到移库单框
    moveCodeFocus() {
      this.$nextTick(() => {
        this.$refs.moveCode.focus();
      });
    },

    // 原始库位框点击或者失焦
    fromLocationCodeFocusClick() {
      this.fromLocationCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "fromLocationCode";
      setTimeout(() => {
        this.fromLocationCodeReadOnly = false;
      }, 200);
    },
    // 焦点聚焦到原始库位框
    fromLocationCodeFocus() {
      this.$nextTick(() => {
        this.$refs.fromLocationCode.focus();
      });
    },

    // 移库箱号框点击或者失焦
    moveCartonNumberFocusClick() {
      this.moveCartonNumberReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "moveCartonNumber";
      setTimeout(() => {
        this.moveCartonNumberReadOnly = false;
      }, 200);
    },
    // 焦点聚焦到移库箱号框
    moveCartonNumberFocus() {
      this.$nextTick(() => {
        this.$refs.moveCartonNumber.focus();
      });
    },

    // SKU框点击或者失焦
    barCodeFocusClick() {
      this.barCodeReadOnly = true;
      // 记录当前对象
      this.currentBlurName = "barCode";
      setTimeout(() => {
        this.barCodeReadOnly = false;
      }, 200);
    },
    // 焦点聚焦到SKU框
    barCodeFocus() {
      this.$nextTick(() => {
        this.$refs.barCode.focus();
      });
    },

    // 选中负数文本框
    minusClick() {
      let ref = this.currentBlurName;
      this.moveTakeoutParams.takeoutQty =
        this.minusChecked == true ? -Math.abs(this.moveTakeoutParams.takeoutQty) : Math.abs(this.moveTakeoutParams.takeoutQty);
      if (ref == "moveCode") {
        this.moveTakeoutParams.moveCode = "";
        this.moveCodeFocus();
      }
      if (ref == "fromLocationCode") {
        this.moveTakeoutParams.fromLocationCode = "";
        this.moveTakeoutParams.fromLocationId = "";
        this.fromLocationCodeFocus();
      }
      if (ref == "toCartinNo") {
        this.moveTakeoutParams.toCartinNo = "";
        this.toCartinNoFocus();
      }
      if (ref == "barCode") {
        this.moveTakeoutParams.barCode = "";
        this.barCodeFocus();
      }
    },
    // 验证移库单号
    verifyMoveCode() {
      // 验证货主/仓库/品牌
      if (this.$root.storerWarehouseBrand === undefined) {
        this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
        return false;
      }
      if (this.moveTakeoutParams.moveCode == "") {
        this.msgShowTime("请输入移库单号！");
        // 定位到移库单号
        this.moveCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      verifyMoveCode(this.moveTakeoutParams).then(response => {
        console.info(response.data);
        // 加载遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          let storerId = response.data.data.storerId;
          let warehouseId = response.data.data.warehouseId;
          let brandId = response.data.data.brandId;
          if (
            this.moveTakeoutParams.storerId == storerId &&
            this.moveTakeoutParams.warehouseId == warehouseId &&
            this.moveTakeoutParams.brandId == brandId
          ) {
            // 赋值
            this.moveTakeoutParams.storerId = storerId;
            this.moveTakeoutParams.warehouseId = warehouseId;
            this.moveTakeoutParams.brandId = brandId;
            this.moveTakeoutParams.allowTakeoutQty = response.data.data.allowTakeoutQty;
            this.moveTakeoutParams.differQty = response.data.data.differQty;
            this.moveTakeoutParams.oldTakeoutQty = response.data.data.oldTakeoutQty;

            // 移库单号验证成功后光标跳转至原始库位框
            this.fromLocationCodeFocus();
          } else {
            // 当前登录账号没有该移库单的操作权限，清掉移库单号
            this.resetPageParams();
            this.moveCodeFocus();
            this.msgShowTime("当前登录账号没有该移库单号的操作权限！");
          }
        } else {
          this.resetPageParams();
          this.msgShowTime(response.data.message);
        }
      });
    },

    // 验证原始库位
    verifyFromLocationCode() {
      // 验证货主/仓库/品牌
      if (this.$root.storerWarehouseBrand === undefined) {
        this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
        return false;
      }
      if (this.moveTakeoutParams.moveCode == "") {
        this.msgShowTime("请输入移库单号！");
        // 定位到移库单号
        this.moveCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.fromLocationCode == "") {
        this.msgShowTime("请输入原始库位！");
        // 定位到原始库位
        this.fromLocationCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      verifyFromLocationCode(this.moveTakeoutParams).then(response => {
        console.info(response.data);
        // 加载遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          // 成功后记录原始库位id
          this.moveTakeoutParams.fromLocationId = response.data.data.fromLocationId;

          // 跳转至移库箱号输入框
          this.moveCartonNumberFocus();
        } else {
          // 清空库位相关数据
          this.moveTakeoutParams.fromLocationId = "";
          this.moveTakeoutParams.fromLocationCode = "";
          this.msgShowTime(response.data.message);
        }
      });
    },

    // 验证移库箱号
    verifyMoveCartonNumber() {
      // 验证货主/仓库/品牌
      if (this.$root.storerWarehouseBrand === undefined) {
        this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
        return false;
      }
      if (this.moveTakeoutParams.moveCode == "") {
        this.msgShowTime("请输入移库单号！");
        // 定位到移库单号
        this.moveCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.fromLocationCode == "") {
        this.msgShowTime("请输入原始库位！");
        // 定位到原始库位
        this.fromLocationCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.moveCartonNumber == "") {
        this.msgShowTime("请输入移库箱号！");
        // 定位到移库箱号
        this.moveCartonNumberFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      verifyMoveCartonNumber(this.moveTakeoutParams).then(response => {
        // 加载遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          // 验证成功，跳转至SKU输入框
          this.barCodeFocus();
        } else {
          // 清空移库箱号相关数据
          this.moveTakeoutParams.moveCartonNumber = "";
          this.msgShowTime(response.data.message);
        }
      });
    },

    // 验证barCode
    verifyBarCode() {
      // 验证货主/仓库/品牌
      if (this.$root.storerWarehouseBrand === undefined) {
        this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
        return false;
      }
      if (this.moveTakeoutParams.moveCode == "") {
        this.msgShowTime("请输入移库单号！");
        // 定位到移库单号
        this.moveCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.fromLocationCode == "") {
        this.msgShowTime("请输入原始库位！");
        // 定位到原始库位
        this.fromLocationCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.moveCartonNumber == "") {
        this.msgShowTime("请输入移库箱号！");
        // 定位到移库箱号
        this.moveCartonNumberFocus();
        return false;
      }
      if (this.moveTakeoutParams.barCode == "") {
        this.msgShowTime("请输入SKU！");
        // 定位到移库箱号
        this.barCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      verifyBarCode(this.moveTakeoutParams).then(response => {
        // 加载遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          // 填写原始箱号
          this.moveTakeoutParams.fromCartonNo = response.data.data.fromCartonNo;
          // 验证成功，执行下架操作
          this.executeMoveTakeout();
        } else {
          // 清空移库箱号相关数据
          this.moveTakeoutParams.barCode = "";
          this.msgShowTime(response.data.message);
        }
      });
    },

    // 执行移库下架操作
    executeMoveTakeout() {
      // 验证货主/仓库/品牌
      if (this.$root.storerWarehouseBrand === undefined) {
        this.msgShowTime("请重新登录，并设置货主、仓库、品牌");
        return false;
      }
      if (this.moveTakeoutParams.moveCode == "") {
        this.msgShowTime("请输入移库单号！");
        // 定位到移库单号
        this.moveCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.fromLocationCode == "") {
        this.msgShowTime("请输入原始库位！");
        // 定位到原始库位
        this.fromLocationCodeFocus();
        return false;
      }
      if (this.moveTakeoutParams.moveCartonNumber == "") {
        this.msgShowTime("请输入移库箱号！");
        // 定位到移库箱号
        this.moveCartonNumberFocus();
        return false;
      }
      if (this.moveTakeoutParams.barCode == "") {
        this.msgShowTime("请输入SKU！");
        // 定位到移库箱号
        this.barCodeFocus();
        return false;
      }
      // 加载遮罩
      this.showLoadingOverlay = true;
      executeMoveTakeout(this.moveTakeoutParams).then(response => {
        // 加载遮罩
        this.showLoadingOverlay = false;
        if (response.data.status) {
          // 更新差异数量
          this.moveTakeoutParams.differQty = Number(this.moveTakeoutParams.differQty) + Number(this.moveTakeoutParams.takeoutQty);
          this.moveTakeoutParams.oldTakeoutQty = Number(this.moveTakeoutParams.oldTakeoutQty) + Number(this.moveTakeoutParams.takeoutQty);
          // 清空并聚焦到SKU
          this.moveTakeoutParams.barCode = "";
          this.barCodeFocus();
          // 验证成功，提示消息
          this.$notify({type: "success", message: response.data.message});
        } else {
          // 清空移库箱号相关数据
          this.moveTakeoutParams.barCode = "";
          this.msgShowTime(response.data.message);
        }
      });
    },

    // 清除页面数据
    resetPageParams() {
      this.moveTakeoutParams.moveCode = "";
      this.moveTakeoutParams.barCode = "";
      this.moveTakeoutParams.fromLocationCode = "";
      this.moveTakeoutParams.fromLocationId = "";
      this.moveTakeoutParams.moveCartonNumber = "";
      this.moveTakeoutParams.fromCartonNo = "";

      this.moveTakeoutParams.allowTakeoutQty = 0;
      this.moveTakeoutParams.differQty = 0;
      this.moveTakeoutParams.oldTakeoutQty = 0;
      this.moveTakeoutParams.takeoutQty = 1;
      this.minusChecked = false;
    },

    // 遮罩层消息展示设置
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
    },
    // 点击下一箱
    clickNextCarton() {
      // 当前箱还有未上架的商品，提醒是否继续开始下一单
      if (this.recCartonNumber != "" && Number(this.moveTakeoutParams.differQty) != 0) {
        this.showComplexMsg = "该箱还未上架完成，是否继续？";
        this.showComplexMsgOverlay = true;
      } else {
        Notify({type: "success", message: "开始下一单！"});
        this.nextCarton();
      }
    },
    // 开始下一箱，清空内容
    nextCarton() {
      // 关闭遮罩层
      this.showComplexMsgOverlay = false;
      // 重置查询条件，默认选中移库单号
      this.moveCodeFocus();
      // 获取当前登录用户名
      this.moveTakeoutParams.user = this.userData.sysUserLoginName;
      this.resetPageParams();
    },
    // 关闭遮罩
    closeOverlay() {
      this.showMsgOverlay = false;
      // 将焦点回到原位置
      if (this.currentBlurName == "moveCode") {
        this.moveCodeFocus();
      } else if (this.currentBlurName == "fromLocationCode") {
        this.fromLocationCodeFocus();
      } else if (this.currentBlurName == "moveCartonNumber") {
        this.moveCartonNumberFocus();
      } else if (this.currentBlurName == "barCode") {
        this.barCodeFocus();
      }
    },
    // 关闭复杂遮罩
    closeComplexOverlay() {
      this.showComplexMsgOverlay = false;
      // 将焦点回到原位置
      if (this.currentBlurName == "moveCode") {
        this.moveCodeFocus();
      } else if (this.currentBlurName == "fromLocationCode") {
        this.fromLocationCodeFocus();
      } else if (this.currentBlurName == "moveCartonNumber") {
        this.moveCartonNumberFocus();
      } else if (this.currentBlurName == "barCode") {
        this.barCodeFocus();
      }
    },

    // 返回上一级页面
    onClickLeft() {
      this.$router.push({
        name: "move"
      });
    }
  }
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}

.van-cell-style {
  .van-cell__value {
    width: 40%;
    text-align: center;
    color: red;
  }
  padding-right: 0px;
  padding-left: 0px;
}

.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0 0 0 16px;
  padding: 0;
  color: #323233;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
}
</style>
